<script setup lang="ts">
import { Search,EditPen, Setting } from '@element-plus/icons-vue'
import {ref, reactive, onMounted} from "vue";
import {useStore} from "vuex";
import { useRouter } from 'vue-router'
import type { addPost } from "@/request/types/posts";
import { insPost } from "@/request/api/Posts";
import { ElMessage } from "element-plus";

//首先在setup中定义
const router = useRouter()
const store = useStore()


let searchName = ref('')

const search = () => {
  if (searchName.value == '' && searchName.value ==null) {
    ElMessage.error('搜索内容不能为空')
  } else {
    store.dispatch('getPostsBySearchName', searchName.value).then((res: any) => {
      if (res === 200){
        // 确保参数名与路由定义一致
        router.push({ name: 'searchResults'});
      } else {
        ElMessage.error('搜索失败')
      }
    })
  }
};


const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

let postForm = reactive<addPost>({
  title: '',
  content: ''
})

let nickName = ref('')
let avatar = ref('')

const getUserInfo = () => {
  store.dispatch('GetInfo').then((res: any) => {
    console.log(res)
  })
}
const loginOut = () => {
  store.dispatch('loginOut').then((res: any) => {
    console.log(res)
    if (res === 200) {
      ElMessage.success('退出成功')
      router.push('/login')
    } else {
      ElMessage.error('退出失败')
    }
  })
}

const toMine = () => {
  router.push('/mine')
}

const toIndex = () => {
  router.push('/home')
}

const insPost1 = () => {
  insPost(postForm).then((res: any) => {
    if (res.code === 200 ) {
      dialogFormVisible.value = false
      ElMessage.success(res.msg)
    } else {
      ElMessage.error(res.msg)
    }
  })
}


onMounted(() =>{
  getUserInfo()
  nickName.value = store.state.nickName
  avatar.value = store.state.avatar
  console.log('aaaa' +avatar.value)
})

</script>

<template>
    <el-container style="height: 100vh" class="layout-container-demo">
      <el-header style="width:100%;text-align: right; font-size: 12px; display: flex;justify-content: space-between;align-items: center;">
        <img @click="toIndex" src="@/assets/logo.png" alt="">
        <div class="search">
          <el-input
             v-model="searchName"
              type="text"
              style="width: 300px;height: 40px"
              placeholder="请输入搜索内容"
              :prefix-icon="Search"
          />
          <el-button style="height: 40px" color="#F0F2F5" type="primary" @click="search">搜索</el-button>
        </div>
        <div class="toolbar">
          <el-button round :icon="EditPen" @click="dialogFormVisible = true">发布帖子</el-button>
          <el-avatar
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              :fit="'cover'"
          />
          <span style="width: 40px;font-size: 16px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;">{{nickName}}</span>
          <el-dropdown>
            <el-icon style="margin-right: 8px; margin-top: 4px" size="16px"><setting/></el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="toMine">个人中心</el-dropdown-item>
                <el-dropdown-item @click="loginOut">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-main>
            <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

  <!--发布表单-->
  <el-dialog v-model="dialogFormVisible" width="750">
    <el-form :model="postForm" style="margin-right: 70px">
      <el-form-item label="帖子标题" :label-width="formLabelWidth">
        <el-input v-model="postForm.title" autocomplete="off" placeholder="请输入标题"/>
      </el-form-item>
      <el-form-item label="帖子内容" :label-width="formLabelWidth">
        <el-input
            v-model="postForm.content"
            style="width: 650px;"
            resize="none"
            :rows="6"
            type="textarea"
            placeholder="请输入内容....."
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="insPost1">
          确认发布
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
  background: #F6F6F6;
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
  background-image: url("./../assets/bg.jpg");
}
.layout-container-demo .toolbar {
  width: 260px;
  display: inline-flex;
  align-items: center;
  justify-content: space-evenly;
  height: 100%;
  right: 20px;
}
.search{
  display: flex;
  align-items: center;
}
</style>
